import React ,{useState} from 'react'
import { CartO, ChatO, ShopO ,Chat} from '@react-vant/icons'
import {ProductCard,Image,ActionBar,Badge,NavBar} from "react-vant"
import {useNavigate, useLocation,useParams} from "react-router-dom"
import useLogin from "../utils/IsLogin" 
import {useDispatch,useSelector} from "react-redux"
import * as api from "../api/index"
import {RootState} from "../utils/index"
type Props = {}

const Details = (props: Props) => {
    const [show_Like,setShow_like] = useState<boolean>(false)
    const dispatch = useDispatch() 
    const [islogin]  = useLogin()
    const {state}  = useLocation()
    const navigate = useNavigate()
    const {details_data} = useSelector((state:RootState) => state)
  return (
    <div>
       <NavBar
        title="标题"
        leftText="返回"
        onClickLeft={() =>navigate(-1)}

      />
        <ProductCard
            priceTop={details_data[0].date}
            desc={details_data[0].title_content}
            title={details_data[0].title}
            bottom={<div style={{display:"flex"}}>
                <p>like:{details_data[0].like_count}</p>
                <p>comments:{details_data[0].comments_count}</p>
            </div>}
            thumb={<div style={{display:"flex",alignItems:"center"}}>
                <Image src={details_data[0].img} lazyload/>

            </div>}
            />
              <ActionBar>

        <ActionBar.Icon
          icon={<>
            <Badge content={details_data[0].like_count}>
              {
                !show_Like? <ChatO /> : <Chat />
              }
            </Badge>
        </>}
          text='点赞'
          onClick={() =>{
            if (islogin) {
              console.log("已经登陆过了");
              setShow_like(!show_Like)
              dispatch(api.like_data_count(details_data[0],show_Like))
            }else{
              navigate("/login")
            }
          }}
        />
        <ActionBar.Icon
          icon={
            <>
                <Badge content={details_data[0].comments_count}>
                    <CartO />
                </Badge>
            </>
         }
          text='评论'
          onClick={() => console.log('cart click')}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text='收藏'
          onClick={() => console.log('shop click')}
        />
        <ActionBar.Button
          type='danger'
          text='立即购买'
          onClick={() => console.log('button click')}
        />
      </ActionBar>
    </div>
  )
}

export default Details